<template>
	<view class="content">
		<!-- 头部轮播  开始  -->
		<view class="carousel-section">
			<!-- 标题栏和状态栏占位符 -->
			<view class="titleNview-placing"></view>
			<!-- 背景色区域 -->
			<view class="titleNview-background" :style="{backgroundColor:titleNViewBackground}"></view>
			<swiper class="carousel" circular @change="swiperChange">
				<swiper-item v-for="(item, index) in advertiseList" :key="index" class="carousel-item" @click="navToAdvertisePage(item)">
					<image :src="item.pic" />
				</swiper-item>
			</swiper>
			<!-- 自定义swiper指示器 -->
			<view class="swiper-dots">
				<text class="num">{{swiperCurrent+1}}</text>
				<text class="sign">/</text>
				<text class="num">{{swiperLength}}</text>
			</view>
		</view>
		<!-- 头部轮播  结束  -->
		
		
		<!-- 头部功能区  开始  -->
		<view class="category-section">
			<view class="category-item" v-for="(item, index) in categoryList" :key="index" @click="navToCategoryList(item.id,item.name)">
				<image :src="item.pic"></image>
				<text>{{item.name}}</text>
			</view>
		</view>
		<!-- 头部功能区  结束  -->
		

		<!-- 品牌制造商直供  开始  -->
		<view class="floor-header" @click="navToShopListPage()">
			<image src="/static/index/shop_product.png"></image>
			<view class="tit-box">
				<text class="tit">品牌制造商直供</text>
				<text class="tit2">工厂直达消费者，剔除品牌溢价</text>
			</view>
			<text class="iconfont icon-you"></text>
		</view>
		<view class="floor-body">
			<view class="shop-list">
				<view v-for="(item, index) in shopList" :key="index"  class="shop-item" @click="navToShopDetailPage(item)">
					<view class="shop-image">
						<image :src="item.logo" mode="aspectFit"></image>
					</view>
					<text class="title clamp">{{item.name}}</text>
					<text class="title2">商品数量：{{item.productCount}}</text>
				</view>
			</view>
		</view>
		<!-- 品牌制造商直供  结束  -->
		

		<!-- 新鲜好物  开始  -->
		<view class="floor-header" @click="navToNewProudctListPage()">
			<image src="/static/index/new_product.png"></image>
			<view class="tit-box">
				<text class="tit">新鲜好物</text>
				<text class="tit2">为你寻觅世间好物</text>
			</view>
			<text class="iconfont icon-you"></text>
		</view>
		<view class="floor-body">
			<scroll-view class="new-list" scroll-x>
				<view class="scoll-wrapper">
					<view v-for="(item, index) in newProductList" :key="index" class="new-item" @click="navToDetailPage(item)">
						<image :src="item.pic" mode="aspectFill"></image>
						<text class="title clamp">{{item.title}}</text>
						<text class="title2 clamp">{{item.subTitle}}</text>
						<text class="price">￥{{item.price}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 新鲜好物  结束  -->
		
		<!-- 人气推荐  开始  -->
		<view class="floor-header" @click="navToHotProudctListPage()">
			<image src="/static/index/hot_product.png"></image>
			<view class="tit-box">
				<text class="tit">人气推荐</text>
				<text class="tit2">大家都赞不绝口的</text>
			</view>
			<text class="iconfont icon-you"></text>
		</view>
		<view class="floor-body">
			<view v-for="(item, index) in hotProductList" :key="index">
				<product-item-row :item="item"></product-item-row>
			</view>
		</view>
		<!-- 人气推荐  结束  -->
		
		<!-- 猜你喜欢  开始  -->
		<view class="floor-header">
			<image src="/static/index/guess_product.png"></image>
			<view class="tit-box">
				<text class="tit">猜你喜欢</text>
				<text class="tit2">你喜欢的都在这里了</text>
			</view>
			<text class="iconfont icon-you" v-show="false"></text>
		</view>
		<view class="floor-body">
			<view v-for="(item, index) in guessProductList" :key="index">
				<product-item-row :item="item"></product-item-row>
			</view>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
		<!-- 猜你喜欢  结束  -->

	</view>
</template>

<script src = "./index.js"></script>

<style lang="scss" src = "./index.scss"></style>
